<template>
    <div class="tb-item">
        <div class="hd-t">
            <div class="more-left c-title-4">
                {{ title }}
                <div class="more-box">
                    <v-tooltip v-model="show" location="top">
                        <template v-slot:activator="{ props }">
                            <img src="@/assets/ask.png" class="i-ask" v-bind="props" />
                        </template>
                        <div class="more-t" v-html="desc"></div>
                    </v-tooltip>
                </div>
            </div>
            <div class="hd-r" v-if="items?.length">
                <!-- <div class="hd-tip c-title-5" v-for="item in items">
                    <span class="ht-lab">{{ item.tip }}</span>
                    <span class="win-color">12.0%</span>
                </div> -->
                <!-- <div class="hd-tip c-title-5" v-if="items[1]">
                    <span class="ht-lab">{{ items[1].tip }}</span>
                    <span class="win-color">12.0%</span>
                </div> -->
            </div>
        </div>
        <div class="dk-box">
            <div class="dk-chart" ref="dom"></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed, watch, onUnmounted, toRaw } from "vue";
import { useAccount } from "@/stores/account";
import { get } from "@/comm/request";
import { URL_TOTAL_RATIO } from "@/comm/api";
import { useKline } from "@/stores/kline";
import { formatBigNumber, formatTimestamp } from "@/comm/format";
import { getVolOption } from "./tabs/TableVol";
import { getRatioOption } from "./tabs/TableRatio";
import { getBaseOption } from "./tabs/TableBase";
import { ClassifySet, TableType } from "./tabs/ClassifySet";

const echarts = (window as any)["echarts"];
const account = useAccount();
const kline = useKline();

const dom = ref(null);
const show = ref(false);
let myChart: any;

type Item = {
    tip: string;
    key: string;
    axis: string;
};

const props = defineProps({
    symbol: String,
    period: String,
    title: String,
    url: String,
    desc: String,
    type: Number,
    items: Array<Item>,
    timestampKey: {
        type: String,
        default: "timestamp"
    }
});

onMounted(async () => {
    loadData();
    window.addEventListener("resize", onResize);
});

onUnmounted(() => {
    window.removeEventListener("resize", onResize);
});

const onResize = () => {
    if (myChart) {
        myChart.resize();
    }
};

watch(
    () => props.period,
    (newVal: any, oldVal: any) => {
        console.log(oldVal, "-->", newVal);
        loadData();
    }
);

const loadData = async () => {
    //多空持仓人数比
    let res: any = await get(props.url!, {
        symbol: props.symbol,
        period: props.period
    });
    var chartDom = dom.value;
    myChart = echarts.init(chartDom);
    myChart.setOption(ClassifySet(props.type, res.data, toRaw(props)));
    // console.log(res, "res");
    // initTable(res.data);
};

// const initTable = (ary: any[]) => {
//     let option;
//     if (props.type == 1) {
//         // option = getRatioOption(ary);
//     }
//     else if (props.type == 2) {
//         option = getBaseOption(ary);
//     }
//     else {
//         option = getVolOption(ary, props);
//     }
//     console.log('yzt_props');
//     var chartDom = dom.value;
//     myChart = echarts.init(chartDom);
//     myChart.setOption(ClassifySet(props.type, ary, props));
// }
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
